<script lang="tsx">
import { TreeNode } from "@/utils/tree";
import Item from "./item.vue";
import { CourseCatalog, CourseItem, CourseItemDetail } from "@/types/course";
import { listItem } from "@/api/train/course";
import { useCourseStore } from "@/store/modules/course";

const Catalog = defineComponent({
  props: {
    courseId: {
      type: String,
      required: true,
    },
    currentItemId: {
      type: String,
      default: "",
    },
    purchased: {
      type: Boolean,
      default: false,
    },
    catalogTree: {
      type: Array as PropType<TreeNode<CourseCatalog, CourseCatalog["id"]>[]>,
      required: true,
    },
    catalogItemsMap: {
      type: Map as PropType<Map<CourseCatalog["id"], CourseItem[]>>,
      required: true,
    },
    itemDetailMap: {
      type: Map as PropType<Map<CourseItem["id"], CourseItemDetail>>,
      required: true,
    },
    level: {
      type: Number,
      default: 1,
    },
  },
  emits: ["addItemDetail"],
  setup(props, { emit }) {
    const courseStore = useCourseStore();

    // 当前展开的目录
    const activeNames = computed({
      // 从历史记录中获取
      get: () => {
        const catalogId = courseStore.catalogHistory[props.courseId]?.[props.level] || "";
        // loadItemsDetail(catalogId);
        return catalogId;
      },
      set: (val) => courseStore.updateCatalogHistory(props.courseId, props.level, val),
    });

    const loadItemsDetail = (catalogId: CourseCatalog["id"]) => {
      if (!catalogId) return;

      listItem(catalogId).then((res) => res.data.map((itemDetail) => emit("addItemDetail", itemDetail)));
    };

    return () => (
      <div
        style={{
          "--nut-collapse-item-padding": "13px 20px 13px 12px",
          "--nut-collapse-wrapper-content-padding": "0px 0px 0px 18px",
          "--nut-font-size-2": "1rem",
        }}
      >
        <nut-collapse v-model={activeNames.value} onChange={loadItemsDetail} accordion>
          {props.catalogTree.map((catalog, index) => (
            <nut-collapse-item name={catalog.id}>
              {{
                title: () => (
                  <div class="flex flex-col">
                    <span class={[activeNames.value.includes(catalog.id) ? "c-blue-7" : "c-slate-7"]}>{`${index + 1}. ${catalog.catalogName}`}</span>
                    <span class="mt-2 c-slate-4 text-sm">{`共 ${
                      catalog.children?.length || props.catalogItemsMap.get(catalog.id)?.length || 0
                    } 节`}</span>
                  </div>
                ),
                default: () => (
                  <>
                    {/* 下级目录 */}
                    {catalog.children && catalog.children.length > 0 ? (
                      <Catalog
                        courseId={props.courseId}
                        currentItemId={props.currentItemId}
                        catalogTree={catalog.children}
                        catalogItemsMap={props.catalogItemsMap}
                        itemDetailMap={props.itemDetailMap}
                        purchased={props.purchased}
                        level={props.level + 1}
                        onAddItemDetail={(itemDetail: CourseItemDetail) => emit("addItemDetail", itemDetail)}
                      />
                    ) : null}
                    {/* 项目 */}
                    {props.catalogItemsMap
                      .get(catalog.id)
                      ?.map((item, itemIndex) => (
                        <Item
                          prefix={`${index + 1}.${itemIndex + 1}`}
                          item={item}
                          active={item.id === props.currentItemId}
                          itemDetail={props.itemDetailMap.get(item.courseItemTypeId) || null}
                          purchased={props.purchased}
                          isDoing={false}
                        />
                      ))}
                  </>
                ),
              }}
            </nut-collapse-item>
          ))}
        </nut-collapse>
      </div>
    );
  },
});

export default Catalog;
</script>
